<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org" xmlns:shiro="http://www.pollix.at/thymeleaf/shiro">
<head th:replace="~{common/header :: commonHead}"></head>
<META HTTP-EQUIV="Cache-Control" CONTENT="no-cache, must-revalidate">
<body class="gray-bg">
<div class="wrapper wrapper-content animated fadeInRight" th:with="page=${pageObj.page},size=${pageObj.pageSize},total=${pageObj.total},totalPage=${pageObj.totalPage},keyword=${pageObj.keyword},fromDate=${pageObj.fromDate},toDate=${pageObj.toDate}">
    <div class="row">
        <div class="col-sm-12">
            <div class="ibox float-e-margins">
                <div class="ibox-title">
                    <div class="ibox-tools">
                        <shiro:hasPermission name="add_activity">
                            <a href="/activity/add" title="添加"><i class="glyphicon glyphicon-plus-sign"></i></a>
                        </shiro:hasPermission>
                        <a href="javascript: window.location.href='/activity/list';" title="刷新"><i
                                class="glyphicon glyphicon-repeat"></i></a>
                    </div>
                </div>
                <div class="ibox-content">
                    <div id="editable_wrapper" class="dataTables_wrapper form-inline" role="grid">
                        <div class="row">
                            <div class="col-sm-2">
                                <div class="dataTables_length" id="editable_length"><label>每页
                                    <select name="editable_length" aria-controls="editable"
                                            class="form-control input-sm" id="page_size_selector">
                                        <option th:selected="${size eq 5}" value="5">5</option>
                                        <option th:selected="${size eq 10}" value="10">10</option>
                                        <option th:selected="${size eq 25}" value="25">25</option>
                                        <option th:selected="${size eq 50}" value="50">50</option>
                                        <option th:selected="${size eq 100}" value="100">100</option>
                                    </select> 条记录</label>
                                </div>
                            </div>
                            <div class="col-sm-2">
                                <select id="activityType" class="chosen-select form-control m-b">
                                    <option th:selected="${pageObj.activityType eq ''}" value="">请选择活动类型</option>
                                    <option th:selected="${pageObj.activityType eq 'theme'}" value="theme">主题活动</option>
                                    <option th:selected="${pageObj.activityType eq 'stage'}" value="stage">舞台活动</option>
                                    <option th:selected="${pageObj.activityType eq 'apply'}" value="apply">报名活动</option>
                                </select>
                            </div>
                            <div class="col-sm-2">
                                <select id="activityStatus" class="chosen-select form-control m-b">
                                    <option th:selected="${pageObj.activityStatus eq ''}" value="">请选择活动状态</option>
                                    <option th:selected="${pageObj.activityStatus eq 'preparing'}" value="preparing">准备中</option>
                                    <option th:selected="${pageObj.activityStatus eq 'processing'}" value="processing">进行中</option>
                                    <option th:selected="${pageObj.activityStatus eq 'over'}" value="over">已结束</option>

                                </select>
                            </div>

                            <div class="col-sm-3">
                                <div class="input-daterange input-group" id="datepicker">
                                    <input type="text" class="input-sm form-control" name="start" id="start_date"
                                           placeholder="开始时间" autocomplete="off" th:value="${pageObj.fromDate} ">
                                    <span class="input-group-addon">到</span>
                                    <input type="text" class="input-sm form-control" name="end" id="end_date"
                                           placeholder="结束时间" autocomplete="off" th:value="${pageObj.toDate}">
                                </div>
                            </div>
                            <div class="col-sm-3">
                                <div class="input-group" style="float: right">
                                    <input th:value="${keyword}" type="text" placeholder="请输入活动名称"
                                           class="input-sm form-control" id="search_bar">
                                    <span class="input-group-btn">
                                        <button type="button" class="btn btn-sm btn-primary"
                                                id="search-btn"> 搜索</button>
                                    </span>
                                </div>
                            </div>
                        </div>

                    </div>
                    <table class="table table-striped table-bordered table-hover  dataTable" id="editable"
                           aria-describedby="editable_info">
                        <thead>
                        <tr role="row">
                            <th aria-label="活动名称" style="width: 15%;">活动名称</th>
                            <th aria-label="活动封面" style="width: 15%;">活动封面</th>
                            <th aria-label="是否推荐" style="width: 10%;">是否推荐</th>
                            <th aria-label="活动类型" style="width: 5%;">活动类型</th>
                            <th aria-label="活动状态" style="width: 10%;">活动状态</th>
                            <th aria-label="活动开始时间" style="width: 10%;">活动开始时间</th>
                            <th aria-label="活动结束时间" style="width: 10%;">活动结束时间</th>
                            <th aria-label="活动创建时间" style="width: 10%;">活动创建时间</th>
                            <th aria-label="是否显示" style="width: 15%;">是否显示</th>
                            <th aria-label="操作" style="width: 10%;">操作</th>
                        </tr>
                        </thead>
                        <tbody>
                        <tr class="gradeA odd" th:if="${#lists.isEmpty(pageObj.list)}">
                            <td colspan="10" style="text-align: center">
                                没有数据o&gt;^&lt;o
                            </td>
                        </tr>
                        <tr class="gradeA odd" th:each="item : ${pageObj.list}">
                            <td th:with="activityName=${item.activityName}"
                                th:utext="${null == keyword ? activityName : #strings.replace(activityName,keyword,'<span style= &quot;color: red;font-weight:bold&quot;>'+ keyword +'</span>')}">
                            </td>

                            <td>
                                <img th:src="${item.coverUrl}" th:height="70px">
                            </td>
                            <td th:text="${item.recommend==0?'否':'是'}"></td>
                            <td th:text="${item.activityType =='theme'?'主题活动':(item.activityType == 'stage'? '舞台活动':'报名活动')}"></td>
                            <td th:text="${item.activityStatus =='preparing'?'准备中':(item.activityStatus =='over'?'已结束':'进行中') }"></td>
                            <td th:text="${item.startTime}"></td>
                            <td th:text="${item.endTime}"></td>
                            <td th:text="${item.createTime}"></td>
                            <td th:text="${item.show==0?'显示':'不显示'}"></td>

                            <td class="center ">
                                <shiro:hasPermission name="edit_activity">
                                    <a type="button" th:href="${'/activity/edit?id=' + item.id}" title="编辑"><i class="glyphicon glyphicon-edit"></i></a>
                                </shiro:hasPermission>
                                <shiro:hasPermission name="delete_activity">
                                    <a type="button" class="delete_but" th:data-href="${'/activity/delete?id=' + item.id}" title="删除"><i class="glyphicon glyphicon-trash"></i></a >
                                </shiro:hasPermission>

                                <a type="button" th:href="${'/activity/list_record?id=' + item.id}" title="报名记录"><i class="glyphicon glyphicon-edit"></i></a>

                            </td>
                        </tr>
                        </tbody>
                    </table>
                    <div class="row">
                        <div class="col-sm-6">
                            <div class="dataTables_info" role="alert" aria-live="polite" aria-relevant="all"
                                 th:text="${'显示 '
                                      + (page * size + 1)
                                      + ' 到 '
                                      + ((page+1) lt totalPage ? (size + page * size) : (total % size == 0 ? total : (total % size + size * page)))
                                      + ' 项，共 '
                                      + total + ' 项 ' + totalPage + ' 页'}">
                            </div>
                        </div>
                        <div class="col-sm-6">
                            <div class="dataTables_paginate paging_simple_numbers">
                                <ul class="pagination" th:if="${totalPage>1}">
                                    <li th:class="${page==0}?'paginate_button previous disabled':'paginate_button previous'">
                                        <a th:href="${(page==0)?'#':'/activity/list?page='+page
                                             +'&pageSize='+size
                                             +'&keyword='+(null==keyword?'':keyword)
                                             +'&fromDate='+(null==fromDate?'':fromDate)
                                             +'&activityType='+(null==pageObj?.activityType ? '':pageObj.activityType)
                                             +'&activityStatus='+(null==pageObj?.activityStatus ? '':pageObj.activityStatus)
                                             +'&toDate='+(null==toDate?'':toDate)}">上一页</a>
                                    </li>
                                    <li th:if="${totalPage<10}" th:each="i:${#numbers.sequence(1,totalPage)}"
                                        th:class="${i==page+1?'active':''}">
                                        <a th:href="${'/activity/list?page='+i
                                            +'&pageSize='+size
                                            +'&keyword='+ (null==keyword?'':keyword)
                                            +'&fromDate='+(null==fromDate?'':fromDate)
                                            +'&activityType='+(null==pageObj?.activityType ? '':pageObj.activityType)
                                            +'&activityStatus='+(null==pageObj?.activityStatus ? '':pageObj.activityStatus)
                                            +'&toDate='+(null==toDate?'':toDate)}"
                                           th:text="${i}"></a>
                                    </li>
                                    <li th:if="${page<4&&totalPage>=9}" th:each="i:${#numbers.sequence(1,9)}"
                                        th:class="${i==page+1?'active':''}">
                                        <a th:href="${'/activity/list?page='+i
                                            +'&pageSize='+size
                                            +'&keyword='+ (null==keyword?'':keyword)
                                            +'&fromDate='+(null==fromDate?'':fromDate)
                                            +'&activityType='+(null==pageObj?.activityType ? '':pageObj.activityType)
                                             +'&activityStatus='+(null==pageObj?.activityStatus ? '':pageObj.activityStatus)
                                            +'&toDate='+(null==toDate?'':toDate)}"
                                           th:text="${i}"></a>
                                    </li>
                                    <li th:if="${page>=4&&totalPage>=9&&page+5<totalPage}"
                                        th:each="i:${#numbers.sequence(page - 3,page + 5)}"
                                        th:class="${i==page+1?'active':''}">
                                        <a th:href="${'/activity/list?page='+i
                                            +'&pageSize='+size
                                            +'&keyword='+ (null==keyword?'':keyword)
                                            +'&fromDate='+(null==fromDate?'':fromDate)
                                            +'&activityType='+(null==pageObj?.activityType ? '':pageObj.activityType)
                                             +'&activityStatus='+(null==pageObj?.activityStatus ? '':pageObj.activityStatus)
                                            +'&toDate='+(null==toDate?'':toDate)}"
                                           th:text="${i}"></a>
                                    </li>
                                    <li th:if="${page>=4&&totalPage>=9&&page+5>=totalPage}"
                                        th:each="i:${#numbers.sequence(totalPage - 8,totalPage)}"
                                        th:class="${i==page+1?'active':''}">
                                        <a th:href="${'/activity/list?page='+i
                                            +'&pageSize='+size
                                            +'&keyword='+ (null==keyword?'':keyword)
                                            +'&fromDate='+(null==fromDate?'':fromDate)
                                            +'&activityType='+(null==pageObj?.activityType ? '':pageObj.activityType)
                                             +'&activityStatus='+(null==pageObj?.activityStatus ? '':pageObj.activityStatus)
                                            +'&toDate='+(null==toDate?'':toDate)}"
                                           th:text="${i}"></a>
                                    </li>
                                    <li th:class="${page+1==totalPage||totalPage<1}?'paginate_button next disabled':'paginate_button next'">
                                        <a th:href="${(page+1==totalPage||totalPage<1) ? '#' : '/activity/list?page='+(page+2)
                                             +'&pageSize='+size
                                             +'&keyword='+(null==keyword?'':keyword)
                                             +'&fromDate='+(null==fromDate?'':fromDate)
                                             +'&activityType='+(null==pageObj?.activityType ? '':pageObj.activityType)
                                             +'&activityStatus='+(null==pageObj?.activityStatus ? '':pageObj.activityStatus)
                                             +'&toDate='+(null==toDate?'':toDate)}">下一页</a>
                                    </li>
                                </ul>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

</body>
<script th:inline="javascript">
    $("#page_size_selector").change(function () {
        let fromDate = $("#start_date").val();
        let toDate = $("#end_date").val();
        let selected = $(this).val();
        let activityStatus = $("#activityStatus").val();
        let activityType = $("#activityType").val();
        window.location.href = initUrl(0, selected, '', fromDate, toDate,activityStatus,activityType);
    })
    $("#search_bar").keydown(function (e) {
        let fromDate = $("#start_date").val();
        let toDate = $("#end_date").val();
        let activityStatus = $("#activityStatus").val();
        let activityType = $("#activityType").val();
        if (e.keyCode == 13) {
            let size = $("#page_size_selector").val();
            let keyword = $(this).val();
            window.location.href = initUrl(0, size, keyword, fromDate, toDate,activityStatus,activityType);
        }
    })

    $("#search-btn").click(function () {
        let fromDate = $("#start_date").val();
        let toDate = $("#end_date").val();
        let activityStatus = $("#activityStatus").val();
        let activityType = $("#activityType").val();
        let size = $("#page_size_selector").val();
        let keyword = $("#search_bar").val();
        window.location.href = initUrl(0, size, keyword, fromDate, toDate,activityStatus,activityType);
    })

    function initUrl(page, size, key, fromDate, toDate,activityStatus,activityType) {
        if (null == page) {
            page = 0;
        }
        return "/activity/list?page=" + page + "&pageSize=" + size + "&keyword=" + key + "&fromDate=" + fromDate + "&toDate=" + toDate + "&activityStatus=" + activityStatus + "&activityType=" + activityType
    }
    $(function () {
        $(".delete_but").click(function () {
            var href=$(this).attr("data-href");
            layer.confirm('是否确认删除？', {
                btn: ['确认删除','取消'], //按钮
                shade: false //不显示遮罩
            }, function(){
                window.location.href=href;
            }, function(){
            });
        });
    });
</script>
</html>